<template>
  <div class="order-item">
    <div class="order-code">
      {{ record.orderCode }}
    </div>
    <div class="order-tags" v-if="tagsList && tagsList.length > 0">
      <div
        class="order-tag"
        :style="{
          'color': tag.color,
          'borderColor': tag.color,
          'background': tag.background,
        }"
        v-for="(tag, index) in tagsList"
      >
        {{ tag.text }}
      </div>
      <u-line color="#EBEDF0FF" margin="8rpx 0 24rpx" />
    </div>
    <u-line v-else color="#EBEDF0FF" margin="24rpx 0" />
    <div class="order-info">
      <!-- 时间信息 -->
      <TimeShow
        :startTime="record.expectStartTime"
        :endTime="record.expectEndTime"
        :upper="`${record.productTypeName}${
          record.useDay ? `(${record.useDay})` : ''
        }`"
        :bottom="record.flightNumber"
      />
      <u-gap height="24"></u-gap>
      <cell
        label="客户信息"
        :value="`${record.clientName}(${record.clientTypeName})`"
      />
      <cell label="用车城市" :value="record.cityName" />
      <cell label="车型" :value="record.groupName" />
      <cell label="起点站" :value="record.startAddress" />
      <template
        v-if="record.expectWaypointList && record.expectWaypointList.length > 0"
      >
        <cell
          :label="
            record.expectWaypointList.length > 1
              ? `中途停靠${index + 1}`
              : `中途停靠`
          "
          :value="way.expectWaypoint"
          v-for="(way, index) in record.expectWaypointList"
          :key="index"
        />
      </template>
      <cell label="终点站" :value="record.endAddress" />
      <!-- 订车人信息、乘车人信息 -->
      <div class="customer-wrap">
        <cell
          label="订车人信息"
          :value="`${record.bookerName}，${record.bookerPhone}`"
        />
        <cell label="乘车人信息">
          <div v-for="(user, userIndex) in record.userInfoList">
            {{ user.userName }}{{ user.userName && user.userPhone ? "，" : ""
            }}{{ user.userPhone }}
          </div>
        </cell>
      </div>
      <!-- 服务商信息 -->
      <div class="customer-wrap" v-if="record.status == 20">
        <div class="provider-name">{{ record.providerName }}</div>
        <u-line color="#EBEDF0FF" margin="24rpx 0" />
        <cell label="司机姓名" :value="record.driverName" />
        <cell label="司机电话" :value="record.driverPhone" />
        <cell label="车牌" :value="record.licenseNo" />
        <cell label="车系" :value="record.brandSeries" />
      </div>
    </div>
    <OperateList :operates="buttonList" :record="record" />
  </div>
</template>

<script>
import TimeShow from "./time-show.vue";
import OperateList from "./operate-list";
import Cell from "./cell.vue";

export default {
  props: {
    record: Object,
  },
  data() {
    return {};
  },
  components: {
    TimeShow,
    Cell,
    OperateList,
  },
  computed: {
    // 标签
    tagsList() {
      const orderLabelList = this.record.orderLabelList;
      if (orderLabelList && orderLabelList.length > 0) {
        const theme = {
          primary: { color: "#0072EBFF", background: "#EAF3FFFF" },
          success: { color: "#24B317FF", background: "#EAFFECFF" },
          warning: { color: "#FF874FFF", background: "#FFF1E4FF" },
          purple: { color: "#4208F0FF", background: "#F4E8FFFF" },
        };
        const config = {
          "待验单": theme.warning,
          "服务商待确认": theme.warning,
          "未派单": theme.warning,
          "客户修改待确认": theme.warning,
          "服务商已确认": theme.success,
          "已派单": theme.success,
          "服务商已验单": theme.success,
          "司机已出发": theme.primary,
          "企业已审核": theme.primary,
          "部分派单": theme.primary,
          "司机已到达": theme.primary,
          "线上服务商": theme.purple,
        };
        return orderLabelList.map((label) => {
          let temp = config[label];
          if (!temp) temp = config.primary;
          return {
            text: label,
            ...temp,
          };
        });
      } else {
        return [];
      }
    },
    // 客户修改待确认
    hasEditNoConfirm() {
      let orderLabelList = this.record.orderLabelList || [];
      return orderLabelList.indexOf("客户修改待确认") > -1;
    },
    // 按钮组
    buttonList() {
      const record = this.record;
      const status = record.status;
      return [
        // 1：待确认 10：待分发， 20：已分发，30：进行中，40：已结束，50：已完成，99：已取消
        {
          label: "取消订单",
          show: !this.hasEditNoConfirm && [1, 10, 20].includes(status),
          permission: "sqms:order:shortOrder:btn.cancel",
          method: (record) => {
            this.$emit('cancel', record)
          },
        },
        {
          label: "确认订单",
          show: !this.hasEditNoConfirm && [1].includes(status),
          permission: "sqms:order:shortOrder:btn.confirm",
          method: (record) => {
            this.$emit('confirm', record)
          },
        },
        {
          label: "修改确认",
          show: this.hasEditNoConfirm,
          permission: "sqms:order:shortOrder:btn.editConfirm",
          method: (record) => {
            uni.navigateTo({
              url: '/pages_qccx/editConfirm?id=' + record.id
            });
          },
        },
        {
          label: "分发",
          show: !this.hasEditNoConfirm && [10].includes(status),
          permission: "sqms:order:shortOrder:btn.distribute",
          method: (record) => {
            uni.navigateTo({
              url: '/pages_qccx/distribute?id=' + record.id
            });
          },
        },
        {
          label: "重新分发",
          show: !this.hasEditNoConfirm && [20].includes(status),
          permission: "sqms:order:shortOrder:btn.reDistribute",
          method: (record) => {
            uni.navigateTo({
              url: '/pages_qccx/distribute?id=' + record.id + '&isRegive=1'
            });
          },
        },
      ];
    },
  },
};
</script>

<style lang="scss" scoped>
.order-item {
  padding: 24rpx 32rpx 32rpx;
  background: #ffffff;
  box-shadow: 0rpx 4rpx 60rpx 0rpx rgba(201, 205, 216, 0.1265);
  border-radius: 4rpx 4rpx 4rpx 4rpx;
  .order-code {
    height: 44rpx;
    line-height: 44rpx;
    font-weight: 600;
    font-size: 28rpx;
    color: #1a1a1a;
  }
  .order-tags {
    display: flex;
    flex-wrap: wrap;
    margin: 16rpx 0 0;
    .order-tag {
      height: 44rpx;
      border: 1rpx solid;
      line-height: 42rpx;
      border-radius: 4rpx 4rpx 4rpx 4rpx;
      padding: 0 16rpx;
      margin-right: 16rpx;
      margin-bottom: 16rpx;
    }
  }
  .order-info {
    .customer-wrap {
      width: 100%;
      background: #f8fafc;
      border-radius: 4rpx 4rpx 4rpx 4rpx;
      padding: 24rpx;
      box-sizing: border-box;
      margin-top: 24rpx;
    }
    .provider-name {
      height: 44rpx;
      font-weight: 600;
      font-size: 28rpx;
      color: #1a1a1a;
      line-height: 44rpx;
    }
  }
}
.order-item + .order-item {
  margin-top: 24rpx;
}
</style>
